<template>
  <div class="table-page">
    <el-card>
      <div class="toolbar">
        <!-- 可扩展筛选项 -->
        <el-input
          v-model="searchOrderId"
          placeholder="订单号"
          style="width: 200px; margin-right: 10px"
        />
        <el-input
          v-model="searchPhone"
          placeholder="手机号"
          style="width: 200px; margin-right: 10px"
        />
        <el-button type="primary" @click="fetchOrders">查询</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%; margin-top: 20px">
        <el-table-column prop="orderId" label="订单号" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="state" label="状态">
          <template #default="{ row }">
            <el-tag :type="row.state ? 'success' : 'info'">
              {{ row.state ? "已完成" : "未完成" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <!-- 可扩展更多列 -->
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
          :page-sizes="[10, 20, 50, 100]"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getOrders, OrderInfoItem } from "../../api/consumer/orders";
import { ElMessage } from "element-plus";

const tableData = ref<OrderInfoItem[]>([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);

const searchOrderId = ref("");
const searchPhone = ref("");

const fetchOrders = async () => {
  try {
    const params = {
      page: currentPage.value,
      size: pageSize.value,
      orderId: searchOrderId.value || undefined,
      phone: searchPhone.value || undefined,
      state: 0, // 可根据实际需求调整
    };
    const res = await getOrders(params);
    tableData.value = res.data.records;
    total.value = res.data.total;
  } catch (e) {
    ElMessage.error("获取订单失败");
  }
};

const handlePageChange = (page: number) => {
  currentPage.value = page;
  fetchOrders();
};

const handleSizeChange = (size: number) => {
  pageSize.value = size;
  currentPage.value = 1;
  fetchOrders();
};

onMounted(() => {
  fetchOrders();
});
</script>

<style scoped lang="scss">
.table-page {
  padding: 20px;
  background: #f5f6fa;
  min-height: 100vh;
}
.toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
